<template>
	<view>
		<view style="padding-top: 6rpx;">
			<view class="box_doctor">
				<!-- 个人信息部分 -->
				<view class="doctor_information">
					<view class="doctor_information_box">
						<view class="headportrait">
							<image :src="doctorDetails.avatar"></image>
						</view>
						<view class="information">
							<view class="box">
								<view class="box_name">{{ doctorDetails.name }}</view>
								<view class="position">{{ doctorDetails.chief }}</view>
							</view>
							<view class="types">{{ doctorDetails.department_name }}</view>
						</view>
					</view>
				</view>
				<!-- 技能 -->
				<view class="doctor_skill">{{ doctorDetails.good_at }}</view>
			</view>
		</view>
		<view class="doctor_bottom">
			<view class="navnar">
				<view v-for="(item, index) in navbar" :key="index" class="tap">
					<view :class="['top_time1', currentTab === index ? 'actives' : '']" @click="addtap(index)">
						{{ item.name }}
					</view>
				</view>
			</view>
			<view class="headdate">
				<view v-if="currentTab == 0">
					<!-- 时间头部 -->
					<view class="top_date">
						<view class="left">
							{{ times }} {{ week }}
							<!-- {{doctorDetails.service_time[0].region}} -->
						</view>
						<view class="right" @click="addswitch">
							更多日期
							<text class="iconfont icon-xiangxia" v-if="flag"></text>
							<text class="iconfont icon-xiangshang" v-else></text>
						</view>
					</view>
					<!-- 展示更多日期 -->
					<view class="more_date" v-show="!flag">
						<view class="weeks acea-row row-between-wrapper">
							<view class="item" v-for="(item, index) in weeks" :key="index" v-if="index != 0">{{ item }}
							</view>
							<view class="item" v-for="(item, index) in weeks" :key="index" v-if="index == 0">{{ item }}
							</view>
						</view>
						<view class="date_box acea-row row-between-wrapper">
							<view class="item_box" v-for="(item, index) in appointmentDate" :key="index">
								<view class="item" :class="times == item.date ? 'font-bg-red' : ''"
									@click="dateChange(item)">{{ item.day }}</view>
							</view>
						</view>
					</view>
					<!-- 时间列表 -->
					<view class="data_list">
						<view v-for="(item1, index) in doctorDetails.audio_time" :key="index">
							<view v-if="item1.region == week">
								<view class="item" v-for="(item2, index2) in item1.title" :key="index2">
									<!-- v-if="item1 ==week" -->
									<view class="son_item" @click="clickappointment(item2, doctorDetails.audio_time)">
										<view class="left" v-if="item2.time">{{ item2.time[0] }} ~ {{ item2.time[1] }}
										</view>
										<view class="right acea-row row-middle">
											<text>￥{{ doctorDetails.money_audio}}</text>
											<text>余号{{ item2.numberpeople_left }}</text>
											<view class="iconfont icon-xiangyou"></view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="introduce">
						<text class="title">擅长</text>
						<view class="content">{{ doctorDetails.good_at }}</view>
					</view>
					<view class="introduce">
						<text class="title">介绍</text>
						<view class="content item">
							<view>{{ doctorDetails.desc }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP -->
		<authorize :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" @onLoadFun="onLoadFun"></authorize>
		<!-- #endif -->
	</view>
</template>

<script>
	var _self;
	let globalData = getApp().globalData;
	import {
		getDoctorDetails,
		appointmentListapi
	} from '@/api/appointment.js';

	import {
		mapGetters
	} from 'vuex';
	import {
		toLogin
	} from '@/libs/login.js';
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	export default {
		computed: mapGetters(['isLogin', 'routeError']),
		components: {

			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				appData: globalData,
				id: '', //医生id
				active: 0,
				appointmentDate: [], //时间数据
				flag: true,
				dayOfWeek: null,
				tableFrom: {
					page: 1,
					limit: 20
				},
				week: '', //周几
				times: '', //时间
				form: {
					page: 1,
					limit: 10
				},
				doctorDetails: {
					service_time: {}
				},
				// 默认激活样式是第一个
				navbar: [{
						name: '预约'
					},
					{
						name: '介绍'
					}
				],
				currentTab: 0,
				
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				
				doctor_id: '',
				doctor_price: '0',
				doc_mer_id:'',
			};
		},
		onLoad(options) {
			if (this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			_self = this;
			_self.id = options.id;
			_self.week = options.week || '';
			_self.doctor_id = options.id;
			_self.doctor_price = options.price || '0';
			_self.doc_mer_id = options.mer_id || '';
			_self.get_doctor_details();
			_self.getCurrentTime();
		},
		onShow() {
			
		},
		methods: {
			// 授权关闭
			authColse: function(e) {
				console.log(e, 'authColse');
				this.isShowAuth = e;
			},
			onLoadFun() {
				this.isShowAuth = false;
			},
			payClose() {
				this.get_doctor_details();
			},
			addtap(i) {
				this.currentTab = i;
			},
			// 选中项改变的事件处理函数
			activeChanged(i, name, time) {
				this.active = i;
				this.week = name;
				this.times = time;
			},
			// 更多日期显示隐藏切换
			addswitch() {
				this.flag = !this.flag;
			},
			// 日期选择
			dateChange(item) {
				if (item.date) {
					_self.times = item.date;
					_self.week = item.week;
				}
			},
			clickappointment(item, item1) {
				if (this.isLogin === false) {
					// #ifdef H5 || APP-PLUS
					toLogin();
					// #endif
					// #ifdef MP
					this.isAuto = true;
					this.$set(this, 'isShowAuth', true);
					// #endif
				} else {
					this.doctorDetails.create_time = this.times;
					if (item.numberpeople_left == 0) {
						return this.$util.Tips({
							title: '今天已预约满'
						});
					}
					
					let service_time = {};
					service_time.region = this.week;
					service_time.time = item.time;
					service_time.day = this.times;
					// console.log("rk===>[预约-时间]" + JSON.stringify(service_time));
					// console.log("rk===>[预约-医生]" + this.id);
					
					let audioJson = encodeURIComponent(JSON.stringify(service_time));
					
					uni.navigateTo({
						url: '/pages/shops/subs_inquiry/picture_text/index?doctor_id=' 
						+ this.doctor_id 
						+ '&price=' + this.doctor_price 
						+ '&mer_id=' + this.doc_mer_id
						+ '&audio_time=' + audioJson
					})
					
				}
			},
			
			get_doctor_details: function() {
				let that = this;
				getDoctorDetails(that.id).then(res => {
					this.doctorDetails = res.data;
					this.doctorDetails.create_time = this.times;
				});
			},
			getCurrentTime() {
				//获取当前时间
				let myDate = new Date();
				var timesStamp = myDate.getTime();
				var currenDay = myDate.getDay();
				var weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				var dates = [];
				for (var i = 0; i < 7; i++) {
					var year = new Date(timesStamp + 24 * 60 * 60 * 1000 * i).getFullYear();
					var month = new Date(timesStamp + 24 * 60 * 60 * 1000 * i).getMonth() + 1;
					var day = new Date(timesStamp + 24 * 60 * 60 * 1000 * i).getDate();
					var month = new Date(timesStamp + 24 * 60 * 60 * 1000 * i).getMonth() + 1;
					month = month < 10 ? `0${month}` : month;
					var day = new Date(timesStamp + 24 * 60 * 60 * 1000 * i).getDate();
					day = day < 10 ? `0${day}` : day;
					var weekI = new Date(timesStamp + 24 * 60 * 60 * 1000 * i).getDay();
					dates.push({
						date: year + '-' + month + '-' + day,
						week: weeks[weekI],
						weekI,
						day
					});
				}
				if (dates[0].weekI == 1) {
					this.appointmentDate = dates;
				} else {
					var new_dates = [];
					var firstWeek = dates[0].weekI - 1;
					for (var i = 0; i < firstWeek; i++) {
						var obj = {
							date: '',
							week: '',
							weekI: '',
							day: ''
						};
						new_dates.push(obj);
					}
					dates.forEach(item => {
						new_dates.push(item);
					});
					for (var i = 0; i < 16 - new_dates.length; i++) {
						var obj = {
							date: '',
							week: '',
							weekI: '',
							day: ''
						};
						new_dates.push(obj);
					}
					this.appointmentDate = new_dates;
				}
				if (!_self.week) {
					_self.week = dates[0].week;
					_self.times = dates[0].date;
				} else {
					dates.forEach(item => {
						if (_self.week == item.week) {
							_self.times = item.date;
						}
					})
				}
			}
		}
	};
</script>

<style lang="scss">
	.top {
		display: flex;
		justify-content: space-around;
		margin-top: 20upx;

		.actives {
			background-color: $yy-main-col;

			view {
				color: #ffffff;
			}
		}
	}

	.top_time {
		width: 120upx;
		height: 120upx;
		display: flex;
		flex-direction: column;
		justify-content: center;

		text-align: center;

		view {
			color: #a3a0a1;
		}
	}

	// 医生列表样式
	.box_doctor {
		width: calc(100% - 36rpx);
		margin: 0 auto;
		padding: 20rpx 20rpx 36rpx 20rpx;
		background: #fff;

		.doctor_information {
			.doctor_information_box {
				display: flex;
			}

			.headportrait {
				width: 115rpx;
				height: 115rpx;
				margin-right: 27rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					overflow: hidden;
				}
			}

			.information {
				padding-top: 26rpx;
				line-height: 1;
				flex: 1;
				overflow: hidden;

				.box {
					.box_name {
						color: #000;
						margin-right: 5rpx;
						font-size: 34rpx;
						font-weight: 700;
						display: inline-block;
					}

					.position {
						display: inline-block;
						color: #3e3e3e;
						font-size: 26rpx;
					}
				}

				.types {
					color: $yy-main-col;
					margin-top: 18upx;
					font-size: 24rpx;
				}
			}
		}

		.doctor_skill {
			color: #9c9c9c;
			margin-top: 22rpx;
			font-size: 24rpx;
			line-height: 1.5;
		}
	}

	//挂号的样式
	.navnar {
		display: flex;
		justify-content: space-around;
	}

	.top_time1 {
		color: #3e3e3e;
		text-align: center;
		padding-bottom: 10rpx;
	}

	.actives {
		color: $yy-main-col;
		width: 70rpx;
		border-bottom: 2rpx solid $yy-main-col;
	}

	.headdate {
		.top_date {
			display: flex;
			margin-top: 60upx;
			padding-bottom: 20upx;
			border-bottom: 2upx solid #cecece;
			justify-content: space-between;

			.left {
				color: #9c9c9c;
				font-size: 28upx;
			}

			.right {
				color: #9c9c9c;
				font-size: 28upx;

				.iconfont {
					font-size: 22rpx;
					display: inline-block;
					margin-left: 10rpx;
				}
			}
		}

		.weeks {
			padding-top: 30rpx;

			.item {
				width: 55rpx;
				text-align: center;
				line-height: 1;
				font-size: 24rpx;
				color: #9c9c9c;
			}
		}

		.date_box {
			.item_box {
				width: 55rpx;
				margin-right: 40rpx;
				margin-top: 12rpx;

				&:nth-child(7n + 7) {
					margin-right: 0;
				}
			}

			.item {
				width: 50rpx;
				height: 50rpx;
				color: #9c9c9c;
				border-radius: 50%;
				text-align: center;
				line-height: 50rpx;
				margin: auto;

				&.font-bg-red {
					color: #fff;
					background: $yy-main-col;
					border: 0.5px solid $yy-main-col;
				}
			}
		}

		.data_list {
			.item {
				display: flex;
				justify-content: space-between;
				padding: 30upx 0;
				border-bottom: 2upx solid #cecece;

				.left {
					color: #3e3e3e;
					font-size: 28rpx;
				}

				.son_item {
					width: 100%;
					display: flex;
					justify-content: space-between;
				}

				.right {
					display: flex;

					text {
						color: $yy-main-col;
						font-size: 28rpx;
						margin-right: 36upx;
					}

					view {
						color: #9c9c9c;
						font-size: 26rpx;
					}
				}
			}
		}

		.introduce {
			margin-top: 60upx;

			.title {
				color: #3e3e3e;
				font-size: 26upx;
				font-weight: 700;
			}

			.content {
				color: #9c9c9c;
				font-size: 26rpx;
				margin-top: 20rpx;
			}

			.item {
				view {
					margin: 10upx 0;
				}
			}
		}

		.top {
			display: flex;
			justify-content: space-around;
			margin-top: 20upx;

			.actives {
				background-color: $yy-main-col;

				view {
					color: #ffffff;
				}
			}
		}

		.top_time {
			width: 100upx;
			height: 80upx;
			display: flex;
			margin: 0 10upx;
			flex-direction: column;
			justify-content: center;

			text-align: center;

			view {
				font-size: 28upx;
				color: #a3a0a1;
			}
		}
	}

	.doctor_bottom {
		background: #fff;
		margin: 19rpx 18rpx;
		width: calc(100% - 36rpx);
		padding: 34rpx 15rpx;
	}
</style>
